
.body{
	margin : 0px;
	padding: 0px;
}
/*****************************1、导航条的使用************************************************/
.div_01{
	background-color: #7f7f7f;
	width: 50%;
	height: 300px;
}
#div_01_title_01{
	text-align: center;
	color: red;
	font-size: 20px;
}
.div_01_navigationBar{
	/*移除列表前小标志。一个导航栏并不需要列表标记*/
	list-style-type: none;
	/*移除浏览器的默认设置将边距和填充设置为0*/
	margin: 0px;
	padding: 0px;

	width: 10%;
	background-color: #f1f1f1;
	/* 如果导航栏选项多，允许滚动 */
    overflow: auto;
    position: fixed;
}
.div_01_navigationBar li a{
	/*显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度*/
	display: block;
	color: #000;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #555;
    border-bottom: none;
    text-align: center;
}
.div_01_navigationBar li a:hover{
	background-color: #555;
    color: white;
}
.div_01_navigationBar_home{
	background-color: #4CAF50;
    color: white;
}
.div_01_navigationBar_about{
	border-bottom: 1px solid #555;
}
.div_01_rightContent{
	background-color: white;
	padding: 5px;
	margin-left:20.2%;
	width: 30%;
}


/*****************************2、水平导航条的使用************************************************/
.div_02{
	background-color: yellow;
	width: 50%;
}
#div_02_title_02{
	text-align: center;
	color: red;
	font-size: 20px;
}
.div_02_navigationBar{
	list-style-type: none;
	margin: 0px;
	background-color: #333;
	height: 49px;

}
.div_02_navigationBar li{
	display: inline;
}
.div_02_navigationBar li a, .dropbtn{
    display: inline-block;
	color: #000;
	text-decoration: none;
    padding: 14px 16px;
    text-align: center;

    
}
.div_02_navigationBar li a:hover, .div_02_dropdown:hover{
	color: #000;
    padding: 14px 16px;
    background-color:#7A991A;
    
}
.div_02_dropdown{
	
}

